<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Asriel|My Profile</title>
	{% load static %}
    <link rel="icon" href="{% static '/img/favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="stylesheet" href="{% static 'css/article-list.css' %}">


</head>
<body>
    <!--nav标签: 导航栏; navbar: bootstrap中定义导航栏的基本类;
        navbar-expand-lg: 大屏幕展开、小屏幕折叠成汉堡菜单;
        navbar-light bg-light: 文本和背景为浅色-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!--container: 基本容器，根据屏幕大小调整容器宽度，防止容器过宽而内容过分散; container-fluid: 全宽容器，宽度始终为100%-->
        <div class="container-fluid">
            <!--navbar-brand: 导航栏品牌，一般是logo或网站名称-->
            <a class="navbar-brand" href="#"><Strong style="font-size: 200%">ASRIEL</Strong>|MY PROFILE</a>
            <!--navbar-toggler: 汉堡菜单按钮-->
            <!--data-bs-toggle: 指定点击按钮后要执行的操作（collapse折叠）;
                data-bs-target: 指定要折叠的导航栏部分的id;
                aria-controls: 无障碍访问辅助属性，告诉屏幕阅读器等辅助技术，这个按钮影响的元素的id;
                aria-expanded: 无障碍访问辅助属性，表明导航栏部分是否处于展开状态，点击后会自动切换true/false;
                aria-label: 无障碍标签，提供了按钮的描述性文本
            -->
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <!--navbar-toggler-icon: 汉堡菜单图标(三横)-->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--collapse: 创建可折叠的内容区域,结合 data-bs-toggle="collapse" 和 data-bs-target 属性，可以实现点击按钮时折叠或展开内容的效果;
                navbar-collapse: 与 collapse 类一起使用，确保导航栏内容在小屏幕上折叠，在大屏幕上展开;
                                 与 navbar-expand-* 类配合使用，以控制导航栏在不同屏幕尺寸下的行为
            -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!--ul: 无序列表-->
                <!--navbar-nav: 定义导航栏中的导航链接列表
                    me-auto: 意为margin-end: auto，在当前书写方向的末端（通常是右侧）添加自动外边距，将导航链接列表推到左侧
                    mb-2 mb-lg-0: 在所有屏幕尺寸上，元素的底部外边距为 0.5rem（即 8px），然后在大屏幕（lg 及以上）上，元素的底部外边距为 0
                -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="./../Asriel">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blogs</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Links
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="https://www.processon.com/">ProcessOn制图</a></li>
                            <li><a class="dropdown-item" href="https://www.51pptmoban.com/">PPT模板</a></li>
                            <li><a class="dropdown-item" href="https://ezgif.com/">GIF生成</a></li>
                            <li><a class="dropdown-item" href="https://www.drvsky.com/">驱动天空</a></li>
                            <li><a class="dropdown-item" href="https://tongyi.aliyun.com/qianwen/">通义千问</a></li>
                            <li><a class="dropdown-item" href="https://chat.deepseek.com/">DeepSeek</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="http://www.gpbeta.com/">SAO UTILS</a></li>
                            <li><a class="dropdown-item" href="http://ygopro.ysepan.com/">YGO PRO</a></li>
                            <li><a class="dropdown-item" href="http://www.ibiqunai.info/">零点看书</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                </ul>

                <!-- 右侧内容（如搜索框、登录按钮等） -->
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="content">
        <div class="container">
            <h2 class="section-title"><strong>Articles</strong></h2>
            <section class="article-section">
                <h4>Online</h4>
                <ul class="article-list online-list">
                    {% for article in articles %}
                        <li><a href="{% url 'read_article' article_id=article.id %}">{{ article.title }}</a></li>
                    {% endfor %}
                </ul>
            </section>
            <section class="article-section download-section">
                <h4>Downloads</h4>
                <ul class="article-list download-list">
                    {% for article in downloads %}
                        <li><a href="{% url 'download_file' filename=article.id %}" download>{{ article.title }}</a></li>
                    {% endfor %}
                </ul>
            </section>
        </div>
    </div>

    <!-- 版权信息 -->
    <footer>
        <div class="container">
            <p>&copy; 2024 AsrielMao. All rights reserved.</p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
        </div>
    </footer>

    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>